<template>
    <div class="list-content h100 bg-fff">
        <AdminList title="管理员" :adminList="adminList" />

        <TableForm :initial-form="form" @query="getList" @reset="reset" :total="total" @current-change="currentChange"
            @size-change="sizeChange" ref="tableFormRef">
            <template #form-items>
                <el-form-item>
                    <el-input v-trim placeholder="请输入合同名称" clearable v-model="form.ContractName"
                        style="width: 190px"></el-input>
                </el-form-item>
                <el-form-item>
                    <el-date-picker v-model="form.timeList" type="daterange" value-format="YYYY-MM-DD"
                        range-separator="至" start-placeholder="开始时间" end-placeholder="结束时间" class="f-ml-10" />
                </el-form-item>
            </template>

            <!-- 下方表格区域 -->
            <template #table>
                <CommonTable :table-data="list" :max-height="580">
                    <el-table-column prop="contractNumber" label="文件编号" width="230" show-overflow-tooltip fixed />
                    <el-table-column prop="contractName" label="文件名称" min-width="300" show-overflow-tooltip />
                    <el-table-column prop="status" label="状态" width="180">
                        <template #="{ row }">
                            <span v-if="row.status == 1 || row.status == 0" class="df ai-c">
                                <i class="tag bg-e77 f-mr-05"></i>
                                <span>签署中</span>
                            </span>
                            <span v-if="row.status == 2" class="df ai-c">
                                <i class="tag bg-green f-mr-05"></i>
                                <span>已完成</span>
                            </span>
                        </template>
                    </el-table-column>
                    <el-table-column prop="title" label="创建人" width="180">
                        <template #="{ row }">
                            <span>{{ row.createLastName }}{{ row.createFirstName }}</span>
                        </template>
                    </el-table-column>
                    <el-table-column prop="createTime" label="创建时间" width="180">
                        <template #="{ row }">
                            <span>{{ getDateTime(Date.parse(row.createTime).toString())[11] }}</span>
                        </template>
                    </el-table-column>
                    <el-table-column prop="updatedDate" label="最新修改时间" width="180">
                        <template #="{ row }">
                            <span>{{ getDateTime(Date.parse(row.updatedDate).toString())[11] }}</span>
                        </template>
                    </el-table-column>
                    <el-table-column prop="signNames" label="签署人" min-width="230" show-overflow-tooltip />
                    <el-table-column prop="title" label="操作" width="100" fixed="right"
                        v-if="hasPermissionOrRole('ContractManagement.List', 1, 1)">
                        <template #="{ row }">
                            <span v-if="hasPermissionOrRole('ContractManagement.Detail', 1, 1)"
                                class="f-mr-10 blue pointer" @click="goDetail(row)">
                                查看
                            </span>
                        </template>
                    </el-table-column>
                </CommonTable>
            </template>
        </TableForm>
    </div>
</template>
<script setup lang="ts">
import { AdminEnum } from '@/enum/admin';
import AdminList from '@/components/AdminList.vue';
import TableForm from '@/components/TableForm/index.vue';
import CommonTable from '@/components/CommonTable/index.vue';
import { getAdminList } from '@/apis/admin';
import { errorTips, getDateTime } from '@/utils/utils';
import usePermissionHasAccess from '@/hooks/permissionHasAccess';
import { reactive, ref, onMounted } from 'vue';
import api from '@/apis/contract';
import { useUserStore } from '@/stores/user';
const userStore = useUserStore();
import { useRouter } from 'vue-router';
const $router = useRouter();
const { hasPermissionOrRole } = usePermissionHasAccess();
const form = reactive({
    ContractName: '',
    StartTime: '',
    EndTime: getDateTime(undefined)[8],
    PageIndex: 1,
    PageSize: 50,
    timeList: [],
});

onMounted(() => {
    getList();
    getAdmin();
});

// list列表
const tableFormRef = ref<any>(null);
const total = ref(0);
const list = ref([]);

const getList = () => {
    let json = {
        UserId: '',
        Email: '',
        ContractName: form.ContractName,
        StartTime: '',
        EndTime: getDateTime(undefined)[8],
        PageIndex: form.PageIndex,
        PageSize: form.PageSize,
        SortField: '',
        SortOrder: '',
    };

    if (form.timeList.length) {
        json.StartTime = form.timeList[0];
        json.EndTime = form.timeList[1];
    } else {
        json.StartTime = '';
        json.EndTime = getDateTime(undefined)[8];
    }

    api.contractList(json).then(res => {
        if (!res || res.code != 1) return;

        const { data, count: num } = res.data;
        tableFormRef.value && tableFormRef.value.updateTotal(num);
        list.value = data;
        total.value = num;
    });
};

// 详情
const goDetail = (row: any) => {
    if (!row.signContract) return errorTips('暂无合同文件');
    $router.push({
        query: {
            signContract: `${userStore.config.webApiUrl}/${row.signContract}`,
            snowflakeId: row.snowflakeId,
        },
        path: '/contract-management-detail',
    });
};

// 重置

const reset = () => {
    form.ContractName = '';
    form.timeList = [];
    form.PageIndex = 1;
    form.PageSize = 50;
    getList();
};

//获取国家页面的管理员数据
const adminList = ref([]);

const getAdmin = async () => {
    const res = await getAdminList({ menuId: AdminEnum.COUNTRY_MANAGEMENT });
    if (!res || res.code != 1) {
        adminList.value = [];
        return;
    }
    adminList.value = res.data;
};

const currentChange = (val: number) => {
    form.PageIndex = val;
    getList();
};

const sizeChange = (val: number) => {
    form.PageSize = val;
    getList();
};
</script>

<style scoped lang="scss">
.list-content {
    position: relative;
    border-radius: 10px;
    height: 100%;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    padding: 15px 20px;
}
</style>
